<template>
  <div class="attraction-item" @click="$emit('item-clicked', attraction.id)">
    <div class="attraction-header">
      <div class="attraction-name">{{ attraction.name }}</div>
      <div class="attraction-category" v-if="attraction.category">{{ attraction.category }}</div>
    </div>
    
    <div class="attraction-info">
      <div class="info-row" v-if="attraction.address">
        <i class="fas fa-map-marker-alt"></i>
        <span>{{ attraction.address }}</span>
      </div>
      
      <div class="info-row" v-if="attraction.tel && attraction.tel.length > 0">
        <i class="fas fa-phone"></i>
        <span>{{ attraction.tel }}</span>
      </div>
      
      <div class="info-row" v-if="attraction.type">
        <i class="fas fa-tag"></i>
        <span>{{ formatType(attraction.type) }}</span>
      </div>
      
      
      
      <div class="attraction-description" v-if="attraction.description">
        {{ attraction.description }}
      </div>
    </div>
    
    <div class="attraction-footer" v-if="attraction.rating">
      <div class="attraction-rating">
        <i v-for="star in fullStars" :key="'full-' + star" class="fas fa-star"></i>
        <i v-if="hasHalfStar" class="fas fa-star-half-alt"></i>
        <i v-for="star in emptyStars" :key="'empty-' + star" class="far fa-star"></i>
        <span class="rating-text">{{ attraction.rating }}</span>
      </div>
      <div class="attraction-actions">
        <button 
          class="action-btn" 
          :class="{ active: isFavorite }" 
          @click.stop="toggleFavorite"
          title="收藏"
        >
          <i :class="isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
        </button>
        
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AttractionItem',
  props: {
    attraction: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isFavorite: false
    }
  },
  computed: {
    fullStars() {
      return this.attraction.rating ? Math.floor(this.attraction.rating) : 0
    },
    hasHalfStar() {
      return this.attraction.rating ? this.attraction.rating % 1 >= 0.5 : false
    },
    emptyStars() {
      return this.attraction.rating ? 5 - Math.ceil(this.attraction.rating) : 5
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      this.$emit('toggle-favorite', this.attraction.id)
    },
    formatType(type) {
      if (!type) return ''
      // 简化类型显示
      const typeMap = {
        '风景名胜;风景名胜相关;旅游景点': '旅游景点',
        '餐饮服务;中餐厅': '中餐厅',
        '餐饮服务': '餐饮',
        '购物服务': '购物',
        '交通设施服务': '交通',
        '科教文化服务': '文化',
        '体育休闲服务': '休闲',
        '医疗保健服务': '医疗',
        '住宿服务': '住宿',
        '生活服务': '生活服务',
        '政府机构及社会团体': '政府机构'
      }
      return typeMap[type] || type.split(';').pop() || type
    }
  }
}
</script>

<style scoped>
.attraction-item {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid var(--primary-color);
  border: 1px solid #e8e8e8;
}

.attraction-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-color);
}

.attraction-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.attraction-name {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--dark-color);
  line-height: 1.3;
  flex: 1;
}

.attraction-category {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 8px;
  white-space: nowrap;
}

.attraction-info {
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: #5a6c7d;
}

.info-row i {
  margin-right: 8px;
  width: 16px;
  color: var(--primary-color);
  font-size: 0.8rem;
}

.attraction-description {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attraction-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.attraction-rating {
  color: #f39c12;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.attraction-rating i {
  font-size: 0.9rem;
}

.rating-text {
  margin-left: 4px;
  font-size: 0.9rem;
}

.attraction-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn:hover {
  background: #f5f5f5;
  color: var(--primary-color);
}

.action-btn.active {
  color: #e74c3c;
}

.action-btn.active:hover {
  background: #fee2e2;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .attraction-item {
    padding: 12px;
  }
  
  .attraction-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .attraction-category {
    margin-left: 0;
    align-self: flex-start;
  }
  
  .info-row {
    flex-wrap: wrap;
  }
}
</style>